 <template>
     <div class="container" @click="handleGallaryClick">
         <div class="wrapper">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item,index) in imgs" :key="index">
                    <img class="gallary-img" :src="item" alt="">
                </swiper-slide>
	        </swiper>
         </div>
     </div>
 </template>
 
 <script>
 export default {
     name:'CommonGallary',
     data() {
      return {
        swiperOption: {
            observer:true,
            observeParents:true
        }
      }
    },
    props:{
        imgs:{
            type:Array,
            default () {
                return []
            }
        }
    },
    methods:{
        handleGallaryClick () {
            this.$emit('close')
        }
    }
 }
 </script>
 
 <style lang="stylus" scoped>

    .container
        display:flex
        flex-direction:column
        justify-content:center
        position:fixed
        z-index:99
        left:0 
        right: 0 
        top: 0 
        bottom: 0 
        background-color:#000
        .wrapper
            height:0
            width:100%
            padding-bottom:100%
            .gallary-img
                width:100%

 </style>
 